.box{
	width: 200px;
	height: 200px;
	/* margin: auto; */
	border: 1px solid pink;
	text-align: center;
	font-size: 32px;
	/* 浮动:让块级盒子水平摆放
	浮动float:left(左浮动),right(右浮动),none(默认值) */
    float: left;
}
.box2{
	width: 500px;
	height: 400px;
	border: 1px solid greenyellow;
} 
/* 第一种清除浮动的方法 */： 
.clear{
	 /* 清除两端浮动 */ 
	clear: both;
} 
/* 第二种清除浮动的方法： */
.bigbox{
	/* overflow: hidden; */
} 
/* 第三种清除浮动的方法:给父级元素添加after伪类 */
/* after:在......之后 */
.clearfix::after{  /* 伪类:在clearfix类的后面 */
content: "";  /* 内容:空 */
display: block;  /* 将伪类转变为块元素 */
height: 0;
clear: both;  /* 清除两端浮动 */
visibility: hidden;  /* 显示状态:隐藏 */
}
/* 第四种清除浮动的方法:给父级元素添加双伪元素 */
.clearfix::before,.clearfix::after{
	content: "";
	display: table;
}
.clearfix::after{
	clear: both;
}

/* 浮动的特性:
 1.浮动的盒子会脱离标准流(脱标);
 2.浮动的盒子一行内显示并且顶端对齐，一行装不下会另起一行。
 3.浮动的盒子具有和行内块元素类似的特性。

/* 清除浮动的方法:
  1.额外标签法(clear:both)：隔墙法(不建议使用)
  2.给父级元素添加overflow:hidden元素
  3.浮动的盒子具有和行内块元素类似的特性
  4.
 */